<template>
	<view class="coupons-body">
        <uv-sticky customStyle="width:100%;">
            <view class="coupons-tab">
                <view v-for="(tab,index) in tabList" :key="index" @click="changeTab(index)" :class="`tab ${tabIndex == index?'active-tab':''}`">
                    {{ tab.name }}（{{ index == 0? props.coupons.length : props.unusedCouponList.length}}张）
                    <view class="tab-line"></view>
                </view>
            </view>
        </uv-sticky>
        <view class="coupons-panel">
            <template v-if="tabIndex == 0">
                <template v-if="props.coupons.length > 0">
                    <view class="coupon-item" v-for="(coupon,index) in props.coupons" :key="index" @click="toggleCoupon(coupon)">
                        <view class="con">
                            <view class="right">
                                <text class="price">
                                    {{ coupon.type == 'VIP'?coupon.balance:(coupon.type == 'A'?coupon.remainNum:coupon.facePrice) }}
                                    <text>{{ coupon.type == 'VIP'?'点':(coupon.type == 'A'?'次':'元') }}</text>
                                </text>
                                <text>{{ coupon.type == 'VIP'?'剩余':(coupon.type == 'A'?'剩余':'面值') }}</text>   
                            </view>
                            <view class="left">
                                <text class="title">{{ coupon.typedesc }}</text>
                                <text class="time">{{coupon.startDate}} - {{ coupon.endDate }}</text>
                            </view>
                            <uv-icon 
                            :name="coupon.isUse?'checkmark-circle-fill':'checkmark-circle'" :color="coupon.isUse?'red':'#999'" size="22"></uv-icon>
                            <view class="circle l"></view>
                            <view class="circle r"></view>
                        </view>
                        <view class="tips">
                            <text>{{ coupon.instruction }}</text>
                        </view>
                    </view>
                </template>
                <uv-empty v-else mode="coupon" icon="https://wx.sijiyoufu.com/static/imgs/project/couponEmpty.png"></uv-empty>
            </template>
            <template v-else>
                <template v-if="props.unusedCouponList.length > 0">
                    <view class="coupon-item" v-for="(coupon,index) in props.unusedCouponList" :key="index">
                        <view class="con">
                            <view class="right">
                                <text class="price">
                                    {{ coupon.type == 'VIP'?coupon.balance:(coupon.type == 'A'?coupon.remainNum:coupon.facePrice) }}
                                    <text>{{ coupon.type == 'VIP'?'点':(coupon.type == 'A'?'次':'元') }}</text>
                                </text>
                                <text>{{ coupon.type == 'VIP'?'剩余':(coupon.type == 'A'?'剩余':'面值') }}</text>
                            </view>
                            <view class="left">
                                <text class="title">{{ coupon.typedesc }}</text>
                                <text class="time">{{coupon.startDate}} - {{ coupon.endDate }}</text>
                            </view>
                            <uv-icon name="checkmark-circle" color="#eee" size="22"></uv-icon>
                            <view class="circle l"></view>
                            <view class="circle r"></view>
                        </view>
                        <view class="tips">
                            <text>{{ coupon.unusedReason }}</text>
                        </view>
                    </view>
                </template>
                <uv-empty v-else mode="coupon" icon="https://wx.sijiyoufu.com/static/imgs/project/couponEmpty.png"></uv-empty>
            </template>
        </view>
	</view>
</template>
<script setup lang="ts">
import { ref ,defineProps,watch} from 'vue'
import { useCoupon} from '@/api/coupon'

const props = defineProps({
    coupons:{
        type:Array,
        default:[]
    },
    order:{
        type:Object,
        default:{}
    },
    unusedCouponList:{
        type:Array,
        default:[]
    }
})

const emit = defineEmits([
    'useCouponed'
])
const tabList = ref<any>([
    {name:'可用'},
    {name:'不可用'}
])
const tabIndex = ref<any>(0)

const changeTab = (index : any) => {
    tabIndex.value = index
}
const toggleCoupon = (item : any) => {
    const {cardno , isUse} = item
    uni.showLoading({
        title: '计算中...',
        mask: true
    })
    const cardnos = []
    props.coupons.forEach(item => {
        if(item.isUse && cardno != item.cardno){
            cardnos.push(item.cardno)
        }
    })
    if(!isUse)cardnos.push(cardno)
    useCoupon({cardnos:cardnos.join(','),tradeno:props.order.tradeno}).then(res => {
        emit('useCouponed',true)
        uni.hideLoading()
    }).catch(() => {
        uni.hideLoading()
    })
}
</script>
<style lang="scss" scoped>
.coupons-panel{
    height: 50vh;
    overflow: hidden;
    overflow-y: scroll;
    width: 100%;
}
.coupons-body{
    padding:52px 0 0;
    overflow-y: auto;
    .coupons-tab{
        width:100%;
        display:flex;
        justify-content: center;
        align-items: center;
        .tab{
            position: relative;
            padding:0 12px 16px;
            color:#666;
            font-weight: 500;
        }
        .tab-line{
            position: absolute;
            bottom: 6px;
            width: 72%;
            height: 9px;
            left: 14%;
            background-image: url();
            display: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        .active-tab{
            font-weight: 600;
            color:$uni-color-primary;
            font-size: $font-base;
            .tab-line{
                display: block;
            }
        }
    }
}
/* 优惠券列表 */
.coupon-item{
    display: flex;
    flex-direction: column;
    margin: 20upx 24upx;
    background: #fff;
    border-radius: 18upx;
    padding:24upx;
    .con{
        display: flex;
        align-items: center;
        position: relative;
        height: 120upx;
        padding: 0 30upx;
        justify-content: space-between;
        &:after{
            position: absolute;
            left: 0;
            bottom: 0;
            content: '';
            width: 100%;
            height: 0;
            border-bottom: 1px dashed #f3f3f3;
            transform: scaleY(50%);
        }
    }
    .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        overflow: hidden;
        height: 100upx;
    }
    .title{
        font-size: 32upx;
        color: $font-color-dark;
    }
    .time{
        font-size: 24upx;
        color: $font-color-light;
        margin-top:12upx;
    }
    .right{
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        color: $font-color-light;
        height: 100upx;
        width: 32%;
    }
    .price{
        font-size: 44upx;
        color: $base-color;
        text{font-size: 22upx;}
    }
    .tips{
        font-size: 24upx;
        color: $font-color-light;
        line-height: 60upx;
        padding-left: 30upx;
    }
    .circle{
        position: absolute;
        left: -6upx;
        bottom: -10upx;
        z-index: 10;
        width: 20upx;
        height: 20upx;
        background: #f3f3f3;
        border-radius: 100px;
        &.r{
            left: auto;
            right: -6upx;
        }
    }
}
</style>